<template>
  <view class="waterfall">
    <view v-for="(item, index) in columnData" :key="index" class="column">
      <video-card
        v-for="(childItem, childIndex) in item"
        :key="childItem.id"
        :data="childItem"
        :id="'item' + childItem.id"
      ></video-card>
    </view>
  </view>
</template>

<script>
import videoCard from "./video-card.vue";
export default {
  components: {
    videoCard,
  },
  props: {
    dataList: {
      type: Array,
      required: true,
      default: [{ customerVO: { headimgurl: "" } }],
    },
    //显示列数
    column: {
      type: Number,
      required: true,
      default: 2,
    },
  },
  data() {
    return {
      columnData: [{ customerVO: { headimgurl: "" } }],
      columnWidth: 0,
      loading: false,
    };
  },
  watch: {
    // 瀑布流数据处理
    dataList: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.setColumnWidth();
          this.setData();
        });
      },
    },
    column: {
      immediate: false,
      deep: true,
      handler(newValue) {
        this.$nextTick(() => {
          this.setColumnWidth();
          this.setData();
        });
      },
    },
  },
  methods: {
    //计算每列的高度
    getElemHeight(index) {
      this.$nextTick(() => {
        var arr = [];
        this.dataList.map((item, index) => {
          uni.getImageInfo({
            src: item.pic,
            success: (e) => {
              item.height = e.height * (this.columnWidth / e.width) + "px";
              uni
                .createSelectorQuery()
                .select("#item" + item.id)
                .boundingClientRect((res) => {
                  arr.push({
                    ...{
                      itemHeight: res.height,
                    },
                    ...item,
                  });
                  if (arr.length == this.dataList.length) {
                    this.columnData = this.distributeToNArrays(
                      arr,
                      this.column,
                    );
                  }
                })
                .exec();
            },
          });
        });
      });
    },
    distributeToNArrays(arr, n) {
      let sums = new Array(n).fill(0);
      return arr.reduce(
        (arrays, item) => {
          let minSum = Math.min(...sums);
          let minIndex = sums.indexOf(minSum);
          arrays[minIndex].push(item);
          sums[minIndex] += item.itemHeight;
          return arrays;
        },
        new Array(n).fill().map(() => []),
      );
    },
    setColumnWidth() {
      let width = uni.getSystemInfoSync().windowWidth - 16;
      if (width > 1190) {
        width = 1182;
      }
      this.columnWidth = Math.floor(width / this.column);
    },
    setData() {
      const resultArray = this.dataList.reduce(
        (acc, cur, index) => {
          const targetIndex = index % this.column;
          acc[targetIndex].push(cur);
          return acc;
        },
        Array.from(Array(this.column), () => []),
      );
      this.columnData = resultArray;
      this.getElemHeight();
    },
    click(item) {
      this.$emit("click", item);
    },
  },
};
</script>

<style scoped>
.waterfall {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 702rpx;
  margin: 0 auto;
}
.empty {
  width: 702rpx;
  height: 600rpx;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
